Window下 Node 实现二维码 + 验证码

Nodejs Node, node-canvas, qrcode 评论

二维码

  1. 先安装 Python; 通过Python 官网 http://www.python.org/getit/ 下载并安装最新版本. 然后将Python 的安装目录(如: C:\Program Files\Python) 添加到PATH环境变量中;

  2. 安装node-gyp 或将 npm 升级到内含 node-gyp 的版本 (nodejs v0.6.13以上的 npm 已内置了node-gyp, 则此步可以略过);

  3. 再安装 Visual C++ 2010 Express; 因为需要用到其中的MSBuild 用以编译 cairo 类库到本地代码; 微软官方获取: http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-cpp-express (VC++下载和安装的过程很漫长,需要耐心等待);

  4. 还要下载包含 cairo 图形处理库的GTK包: http://cairographics.org/download/ , 选gtk±bundle_2.24.10-20120208_win32 或最新版,

  5. 将下载的GTK包解压到 C:\GTK\ 目录(必须是这个目录名,否则接下来的MSBuild编译可能通不过),

  6. 在Windows环境变量PATH 后添加 C:\GTK\bin 目录 (需要注销Windows重新登录才能全局生效), 以供 canvas 运行时调用cairo的动态链接库 libcairo-2.dll 等;

  7. 最后 npm install canvas , 期间将自动运行MsBuild 编译生成 canvas.node 本地目标库, 生成的目标库位于 path\to\node_modules\canvas\build\Release\canvas.node;

  8. DOS命令行下: CD 进入 canvas\build\Release\ 这个目录, 运行 node 测试canvas是否安装成功: C:\path\to\node\node_modules\canvas\build\Release> node.exe

var canvas = require(’./canvas’);

若显示 undefined , 而不是错误信息 ,应该就安装成功了. 若显示Unable to load shared library 则可能是 GTK\bin 目录未在PATH路径中,添加上即可.

按照上篇文章的步骤配置好环境之后，再配置一下cnpm(npm 国内淘宝镜像)
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装成功后在cmd下 输入 cnpm -version 查看当前cnpm版本信息

cnpm install qrcode进行安装二维码模块（还有一个简化版的二维码生成模块qrcode-image），出现下列信息说明模块安装成功
安装信息

接下来就是进行我们的DEMO测试:

1
2
3
4
5
6
7
8
9
10
router.get('/qrcode',function(req,res){
   var qrcode = require("qrcode");
    console.log("正在进行二维码的绘制。。。");
    res.writeHead(200,{"Content-Type":"text/html"});
    qrcode.toDataURL("我有一个小秘密就不告诉你",function(err,url){
        if(err){console.log(err);return;}
        res.end("<!DOCTYPE html/><html><head><meta charset='UTF-8'><title>二维码测试</title></head>" +
            "<body><p>请扫描下边的二维码完成支付</p><img src='"+url+"'/></body></html>")
    });
});

在浏览器里访问http://localhost:3000/qrcode，得到如下二维码，可以拿微信扫一下看信息
二维码

验证码

做完二维码之后突然就想到了验证码，于是乎，小爷我就又查找了一下window下如何使用node实现二维码验证，然后就发现了一个模块，惊喜万分，赶快尝试一下，come on;
使用cnpm进行模块安装：cnpm install ccap
参考：https://github.com/DoubleSpout/ccap
很顺利的就安装成功了，接下来我们测试一发吧。。。

1
2
3
4
5
6
7
8
router.get('/authCodePic',function(req,res){
    var ccap = require('ccap');//Instantiated ccap class
    var authCode = ccap();
    var ary = authCode.get();
    authCodeString = ary[0];
    var buf = ary[1];
    res.end(buf);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
请输入验证码：<input type="text" /><img onclick="reloadPic();" id="myPicCode" src="http://localhost:3080/authCodePic"/><br>

<br><br>
</body>
<script type="text/javascript">
    function reloadPic(){
        var x=document.getElementById("myPicCode");
        x.setAttribute('src','http://localhost:3080/authCodePic?'+Math.random());
    }
</script>
</html>

完事，看一下效果如何，在浏览器输入http://localhost:3000/authCodePic,效果如下:
验证码

哎呦不错哦，OK，小伙伴们也来尝试一发吧。。。。

引自:
网易博客(奔跑吧~昭熙小乐)-Windows 下成功安装qrcode,node-canvas实现二维码的操作
网易博客(奔跑吧~昭熙小乐)-Window下node实现二维码续 + 验证码
参考:
https://cnodejs.org/topic/505080cb5aa28e09430d89b0

昭熙小乐净 静 竞 精 敬 警

Nodejs && Web Developer